<template>
  <div v-show="showTab" class="global-footer">
    <van-tabbar
      v-model="active"
      active-color="#E60033"
      inactive-color="#8E8E93"
      class="tab"
      :placeholder="true"
      route
    >
      <template v-for="(item, index) in tabList">
        <van-tabbar-item
          :key="item.id"
          :name="index"
          replace
          :to="item.path"
          :icon="item.icon"
        >
          <span>{{ item.name }}</span>
        </van-tabbar-item>
      </template>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      showTab: false,
      active: 0,
      tabList: [
        {
          name: "设备中心",
          path: "/",
          icon: "cluster-o"
        },
        {
          name: "我的",
          path: "/myhome",
          icon: "user-o"
        }
      ]
    };
  },
  watch: {
    $route(to, from) {
      if (!to) return;
      for (let i = 0; i < this.tabList.length; i++) {
        if (this.tabList[i].path.includes(to.path)) {
          this.showTab = true;
          break;
        } else {
          this.showTab = false;
        }
      }
    }
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
.global-footer {
  height: 100px;
  ::v-deep .van-tabbar-item__icon {
    width: 44px;
    height: 44px;
    img {
      height: 100%;
    }
  }
}
</style>
